<template>
    <el-form class="-mb-15px" :model="params" ref="queryFormRef" :inline="true" label-width="68px">
      <el-form-item label="" prop="username">
        <el-input
v-if="params.type == 'input'" v-model="singleName" :placeholder="'请输入' + params.label" clearable
          @keyup.enter="handleQuery" class="!w-240px" />
          <el-date-picker
            v-if="params.type == 'month'"
            style="width: 100%"
            v-model="singleName"
            value-format="YYYY-MM"
            type="month"
            placeholder="请选择"
          />
          <el-date-picker
            v-if="params.type == 'date'"
            style="width: 100%"
            v-model="singleName"
            value-format="YYYY-MM-DD"
            type="date"
            placeholder="请选择"
          />
          <el-date-picker
            v-if="params.type == 'year'"
            style="width: 100%"
            v-model="singleName"
            value-format="YYYY"
            type="year"
            placeholder="请选择"
          />
      </el-form-item>
      <el-form-item>
        <el-button @click="handleQuery">
          <Icon icon="ep:search" />搜索
        </el-button>

        <el-popover placement="bottom" :width="600" trigger="click">
          <template #reference>
            <el-button style="margin-right: 16px">
              <Icon icon="mdi:filter-outline" />筛选
            </el-button>
          </template>
          <el-form ref="formRef" :model="searchForm" label-width="80px">
            <el-row>
              <template v-for="(item, index) in localHeightSearch" :key="index">
                <el-col :span="12" v-if="item.type === 'input'">
                  <el-form-item :label="item.label">
                    <el-input v-model="item.value" :placeholder="'请输入' + item.label" />
                  </el-form-item>
                </el-col>
                <el-col :span="12" v-if="item.type === 'date'">
                  <el-form-item :label="item.label">
                    <el-date-picker v-model="item.value" value-format="YYYY-MM-DD" :teleported="false" type="date" :placeholder="'请选择' + item.label" />
                  </el-form-item>
                </el-col>
                <el-col :span="12" v-if="item.type === 'month'">
                  <el-form-item :label="item.label">
                    <el-date-picker v-model="item.value" value-format="YYYY-MM" :teleported="false" type="month" :placeholder="'请选择' + item.label" />
                  </el-form-item>
                </el-col>
                <el-col :span="12" v-if="item.type === 'select'">
                  <el-form-item :label="item.label">
                    <el-select
                      v-model="item.value"
                      placeholder="请选择"
                       :teleported="false"
                      style="width: 240px"
                    >
                      <el-option
                        v-for="option in item.selectArr"
                        :key="option.value"
                        :label="option.label"
                        :value="option.value+''"
                      />
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="24" v-if="item.type === 'datetimerange'">
                  <el-form-item :label="item.label">
                    <el-date-picker
                    :teleported="false"
                      v-model="item.value"
                      value-format="YYYY-MM-DD HH:mm:ss"
                      type="datetimerange"
                      range-separator="至"
                      start-placeholder="开始日期"
                      end-placeholder="结束日期"
                    />
                  </el-form-item>
                </el-col>
              </template>
            </el-row>
            <el-row>
              <el-form-item style="width: 100%;">
                <div style="display: flex; justify-content: center; align-items: center;width: 100%;">
                  <el-button type="primary" @click="search">
                    <Icon icon="ep:search" />搜索
                  </el-button>
                  <el-button @click="reset">
                    <Icon icon="ep:refresh" />重置
                  </el-button>
                </div>
              </el-form-item>
            </el-row>
          </el-form>
        </el-popover>
      </el-form-item>
    </el-form>
</template>

<script lang="ts" setup>


const props = defineProps({
  heightSearch: {
    type: Array,
    required: true
  },
  params: {
    type: Object,
    default: () => {
      type: 'input'
    }
  },
});

const emits = defineEmits(['singleSearch', 'heigthSearchValue','resetTable']);
const localHeightSearch: any = ref([]);
watch(
  () => props.heightSearch,
  (newVal) => {
    localHeightSearch.value = newVal;
  },
  { immediate: true }
);

const searchForm = reactive({

})
const queryFormRef = ref() // 搜索的表单
const singleName = ref() // 搜索的表单
/** 添加/修改操作 */
const formRef = ref()
const openForm = (type: string, id?: number) => {

}
/** 搜索按钮操作 */
const handleQuery = () => {
  console.log(singleName,"搜索")
  emits('singleSearch', singleName.value)
}

/** 重置按钮操作 */
const reset = () => {
  console.log("重置")
  localHeightSearch.value.forEach(item => item.value = '');
  const query = {}
  localHeightSearch.value.forEach(item => {
    query[item.key] = ""
  })
  console.log(query,"query")
  emits('resetTable',query)
}
// 高级搜索-搜索
const search = () => {

  const query = {}
  localHeightSearch.value.forEach(item => {
    if (Array.isArray(item.key)) {
      query[item.key[0]] = item.value[0]
      query[item.key[1]] = item.value[1]
    } else {
      console.log(item.value,"item.value")
      if(item.type != "datetimerange"){
        item.value=item.value+''
      }
      
      console.log(item.value,"item.value1")
      if (item.value == undefined || (item.type === "select" && item.value.indexOf(',') > -1)) {
        query[item.key] = ''
      } else {
        query[item.key] = item.value
      }
    }
  })
  emits('heigthSearchValue', query)

}

</script>
<style lang="scss" scoped></style>